<template>
    <div class="boxs">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="nickname" prop="name">
                <el-input v-model="queryParams.name" placeholder="nickname" clearable size="small" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">Search</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="moreArr" border style="margin-top: 15px" v-loading="loading">
            <el-table-column label="email" align="center" prop="email" />
            <el-table-column label="Revenue" align="center" prop="invitation_rewards" />
            <el-table-column label="Already Withdrawn" align="center" width="150" prop="withdrawn_rewards" />
            <el-table-column label="Remaining Withdrawable" align="center" width="190"
                prop="remaining_withdrawable_rewards" />

            <el-table-column label="status" align="center" prop="status">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status == '0'">normal</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == '1'">Ban</el-tag>
                </template>

            </el-table-column>
            <el-table-column label="CalcFormula" align="center" width="200" prop="status">
                <template slot-scope="scope">
                    revenue * {{ scope.row.rate_parameter1 }} / {{ scope.row.rate_parameter2 }} *
                    {{ scope.row.rate_parameter3 }}
                </template>
            </el-table-column>

            <el-table-column label="settlement_type" align="center" width="130" prop="settlement_type">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.settlement_type == '0'">Immediate</el-tag>
                    <el-tag type="success" v-if="scope.row.settlement_type == '1'">Batch</el-tag>
                </template>

            </el-table-column>
            <el-table-column label="count_threshold" align="center" width="140" prop="count_threshold" />

            <el-table-column label="create_time" width="160" align="center" prop="create_date" />
            <el-table-column label="update_time" width="160" align="center" prop="update_date" />
            <el-table-column label="operate" width="150" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" @click="edit(scope.row)">edit</el-button>
                    <el-button size="mini" type="danger" disabled
                        @click="handleDelete(scope.$index, scope.row)">Ban</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
            @pagination="getMore" /> -->

        <el-dialog title="operate" :visible.sync="dialogVisible" width="40%">
            <!-- <div style="margin-bottom: 20px ; color: red;">分佣比例设置:平台所得收益*比例=用户所得收益;
                <br>如观看广告,平台所得收益1元,分成比例为0.0002,用户所得就是1元*千分之2=0.0002元。</div> -->
            <el-form class="demo-form-inline" label-position="top" label-width="200px" :model="form" :rules="rules"
                ref="ruleForm">
                <el-form-item label="CalcFormula :">
                    <div class="flex_">
                        <div class="symbol" style="font-size: 14px;margin-right: 0;">ad revenue</div>
                        <div class="symbol">*</div>

                        <el-input-number controls-position="right" v-model="form.rate_parameter1" :min="0.01"
                            :precision="2" :step="0.01" :max="10" style="width: 150px;"></el-input-number>
                        <div class="symbol">/</div>
                        <el-input-number controls-position="right" v-model="form.rate_parameter2" :min="1"
                            :precision="0" :step="1" style="width: 150px;"></el-input-number>
                        <div class="symbol">*</div>
                        <el-input-number controls-position="right" v-model="form.rate_parameter3" :min="0.01"
                            :precision="2" :step="0.01" :max="10" style="width: 150px;"></el-input-number>
                    </div>
                </el-form-item>
                <el-form-item label="settlement_type :">
                    <el-radio v-model="form.settlement_type" label="0">Immediate</el-radio>
                    <el-radio v-model="form.settlement_type" label="1">Batch</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button :type="form.id ? 'warning' : 'primary'" @click="sub">{{
            form.id ? "Confim" : "Confim"
        }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addTests, getTests, upTests, delTests } from "@/api/tests";
import { getUsreList, editUser } from "@/api/porter";
import Search from '@/components/HeaderSearch';
export default {
    name: "porterUser",
    data() {
        return {
            queryParams: {
                page: 1,
                size: 10
            },
            total: 0,
            loading: false,
            addLoading: false,
            moreArr: [],
            dialogVisible: false,
            form: {
                name: "",
                remark: ""
            },
            search: "",
            rules: {
                name: [
                    { required: true, message: '请输入测试账号名称', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    created() {
        this.getUsreList();
    },
    methods: {
        async sub() {
            try {
                await editUser(this.form);
                this.addLoading = false;
                this.$message.success("操作成功")
                this.getUsreList();
                this.dialogVisible = false;
            } catch (e) {
                this.addLoading = false;
            }
        },
        edit(row) {
            this.form = Object.assign({}, row);
            this.dialogVisible = true
        },
        async getUsreList() {
            this.loading = true;
            let { data } = await getUsreList(this.queryParams);
            this.loading = false;
            data.forEach(item => {

            })
            this.moreArr = data;
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getUsreList();
        },
        async affirm() {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                try {
                    this.addLoading = true;
                    !this.form.id && await addTests(this.form);
                    this.form.id && await upTests({ ...this.form });
                    this.addLoading = false;
                    this.$message.success(this.form.id ? "修改成功！" : "添加成功！")
                    this.getUsreList();
                    this.dialogVisible = false;
                } catch (e) {
                    this.addLoading = false;
                }
            });
        },
        openDialog() {
            this.form = {};
            this.dialogVisible = true;
        },
        handleEdit(i, row) {
            this.form = { ...row };
            this.dialogVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该测试账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
            }).then(async () => {
                await delTests({ id: row.id });
                this.getMore();
                this.$message({
                    message: '删除成功！',
                    type: 'success'
                });
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}
.symbol{
    margin: 0 20px;
    font-weight: bold;
    font-size: 20px;
    color: #606266;
}
</style>
